import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';

import * as screenfull from 'screenfull';
import {ServerSocket} from '@core/services/ws.service';
import {Subscription} from 'rxjs/Subscription';
import {HttpService} from '@core/services/http.service';
import {ActivatedRoute} from '@angular/router';
import {TokenService} from '@core/net/token/token.service';
import {NgxEchartsService} from 'ngx-echarts';
import {CSixHatComponent} from "../../project/scene/componentCenter/c-six-hat/c-six-hat.component";
@Component({
    selector: 'app-layout-fullscreen',
    templateUrl: './fullscreen.component.html',
    styleUrls: ['./style.less'],
    styles: [`
        :host ::ng-deep .group-box {
            margin-bottom: 12px;
            width: 980px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        :host ::ng-deep .group-box.none {
            display: none;
        }

        :host ::ng-deep .group {
            width: 31%;
            height: auto;
            padding: 5% 0;
            border: 8px solid #fff;
            box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, .4);
            margin: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        :host ::ng-deep .group {
            background: url("./assets/img/group-bg.jpg") top left no-repeat;
            background-size: 100% 100%;
            border-radius: 20px;
        }

        .group-info {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .group-info img {
            width: 20px;
            height: auto;
            vertical-align: middle;
            margin: -2px 10px 0 0;
        }

        .group-info div {
            margin: 0 20px;
            font-size: 18px;
        }

        .group-info div span {
            font-size: 22px;
            padding-left: 50px;
        }

        :host ::ng-deep .img-name {
            line-height: 55px;
            font-size: 22px;
            font-weight: bold;
            padding: 0 25px;
            justify-content: center;
            display: flex;
            flex-direction: row;
            margin-bottom: 20px;
        }

        :host ::ng-deep .img-name img {
            width: 55px;
            height: 55px;
            vertical-align: middle;
            margin-right: 15px;
            border-radius: 50%;
        }

        :host ::ng-deep .pick {
            width: 100%;
            height: 100%;
            padding: 30px 10px 0;
            box-sizing: border-box;
        }

        :host ::ng-deep .pick > div {
            width: calc(10% - 20px);
            margin: 10px;
            text-align: center;
            font-size: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            box-sizing: border-box;
            float: left;
        }

        :host ::ng-deep .pick div .img {
            border-radius: 50%;
            width: 100%;
            border: 8px solid #ccc;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding-top: calc(100% - 10px);
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        :host ::ng-deep .pick div.picked .img {
            border: 8px solid red;
        }

        :host ::ng-deep .pick div .img img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        :host ::ng-deep .pick div.picked p {
            color: red;
        }

        :host ::ng-deep .pick div p {
            width: 100%;
            text-align: center;
        }

        :host ::ng-deep .code {
            width: 100%;
            height: 100%;
            background: url('./assets/img/code-bg.png') top left no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        :host ::ng-deep .code .aclass {
            padding: 20px;
            background: url("./assets/img/code-border.png") top left no-repeat;
            background-size: 100% 100%;
            margin-left: 155px;
        }

        :host ::ng-deep .code .aclass img {
            width: 600px;
            height: 600px;
        }

        :host ::ng-deep .code .code-logo img {
            width: 100px;
            height: auto;
        }

        :host ::ng-deep .goldResult {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
        }

        :host ::ng-deep .r-shadow {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, .3);
        }

        :host ::ng-deep .r-container {
            width: 780px;
            height: 450px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
        }

        :host ::ng-deep .r-top {
            width: 135px;
            height: 135px;
            border: 3px solid #fff;
            margin-top: -67px;
            border-radius: 50%;
            background: #ccc;
            padding: 5px 15px;
        }

        :host ::ng-deep .r-title {
            font-size: 24px;
            font-weight: bold;
        }

        :host ::ng-deep .r-content {
            display: flex;
            flex-direction: row;
            width: 90%;
            border-bottom: 1px solid #ccc;
            justify-content: center;
            align-items: flex-end;
        }

        :host ::ng-deep .r-content > div {
            text-align: center;
        }

        :host ::ng-deep .bar {
            width: 125px;
            border-radius: 5px 5px 0 0;
            color: #fff;
            font-size: 22px;
            margin: 0 20px;
        }

        :host ::ng-deep .bar-2 {
            background: #4ca7ff;
            height: 120px;
        }

        :host ::ng-deep .bar-1 {
            background: #ef667a;
            height: 190px;
        }

        :host ::ng-deep .bar-3 {
            background: #444;
            height: 50px;
        }

        :host ::ng-deep .r-bottom {
            width: 90%;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        :host ::ng-deep .r-bottom div {
            width: 125px;
            text-align: center;
            margin: 10px 20px 0;
            font-size: 24px;
        }

        :host ::ng-deep .devote {
            width: calc(100% - 20px);
            height: 100%;
            display: flex;
            margin: 10px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }

        :host ::ng-deep .devote > div {
            flex: 1;
            width: 100%;
            height: 500px;
            display: flex;
            margin: 0 10px;
            border: 1px solid #7a7a7a;
        }

        :host ::ng-deep .devote > div > div {
            width: 100% !important;
        }

        :host ::ng-deep .devote > div > div > canvas {
            width: 100% !important;
        }
    `],
})
export class PreviewComponent implements OnInit, OnDestroy, AfterViewInit {
    value = '{"sign":"4dec1f9e20f86b62335ba913ae29fa0d"}';
    active = false;
    componentList = [];
    answerList = [];
    guesskey = '';
    time;
    socketSubscription: Subscription;
    p_id;
    sim_id;
    projectParmas;
    gList: any[] = [];
    IP;
    control;
    goldResult = [
        //     {
        //     g_name: '第二队',
        //     money_g: '8000',
        //     gdkstate: 1
        // }, {
        //     g_name: '第一队',
        //     money_g: '10000',
        //         gdkstate: 2
        // },
        //     {
        //         g_name: '第三队',
        //         money_g: '5000',
        //         gdkstate: 2
        //     }
    ];
    pickList = [];

    echartsOption = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            minInterval: 1
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    };

    @ViewChild('charts') charts: ElementRef;
    echartsObj;


    constructor(public ws: ServerSocket, public http: HttpService, private activeRoute: ActivatedRoute, public token: TokenService, public echarts: NgxEchartsService) {
        this.IP = this.http.IP_PORT;
    }

    ngOnInit() {
        let value;
        let jsonValue;
        this.ws.connect();
        this.activeRoute.queryParams.subscribe(params => {
            // 测试用
            //  console.log(params);
            jsonValue = JSON.parse(params.data);

            // console.log(jsonValue);

            value = JSON.parse(this.value);
            value.sim_id = jsonValue.sim_id;
            value.cla_id = jsonValue.cla_id;
            value.cour_id = jsonValue.cour_id;
            value.p_type = jsonValue.p_type;
            value.p_id = jsonValue.p_id;
            value.teacherToken = this.token.data.access_token;
            this.value = JSON.stringify(value);
            this.projectParmas = {
                width: jsonValue.list[0]['p_width'],
                height: jsonValue.list[0]['p_height']
            };

        });

    }

    s_id;
    n_id;
    g_id;
    goldObj;
    start = true;
    devoteShow = false;
    talkgroup = "无人发言";
    selectshow = false;
    talkNum = 0;
    currindex = -1;
    sixScore = false;
    sixScoreList = [];
    sixAnswerList = [];
    devoteAnswerList =[];
    devoteNumList =[];
    @ViewChild(CSixHatComponent) CSixHatComponent: CSixHatComponent;

    ngAfterViewInit() {
        this.socketSubscription = this.ws.messages.subscribe((message) => {
            const jsonObj = JSON.parse(message);
            console.log(jsonObj)
            if (jsonObj['action'] === 'pc_call') { // 场景投屏
                //console.log(JSON.parse(message))
                this.devoteShow = false;
                this.n_id = jsonObj['datas'].n_id;
                this.g_id = jsonObj['datas'].g_id;
                this.sim_id = jsonObj['sim_id'];
                this.start = false;
                this.goldObj = '';
                this.sixScore = false;
                this.sixScoreList.length = 0;
                if (jsonObj['datas']['s_data']) {
                    this.answerList.length = 0;
                    this.gList.length = 0;
                    this.pickList.length = 0;
                    const JSONdata = jsonObj['datas']['s_data'];
                    this.goldObj = jsonObj['datas']['gold'] || '';
                    this.componentList = JSONdata['componentList'];
                    this.s_id = jsonObj['n_id'];
                    if (jsonObj['list'].length > 0) {
                        for (let i = 0; i < jsonObj['list'].length; i++) {
                            this.answerList.push(jsonObj['list'][i]);
                        }
                    }
                }
                // 初始化分组投屏
                if (jsonObj['datas']['GroupId']) {
                    this.componentList.length = 0;
                    this.pickList.length = 0;
                    this.gList = jsonObj['datas']['GroupId'];
                }
                // 场景内视频音频播放和暂停
                if (jsonObj['datas']['op'] === 'play' || jsonObj['datas']['op'] === 'pause') {
                    this.control = jsonObj['datas']['op'];
                }
                // 沙漠掘金结果页list
                if (jsonObj['datas']['op'] === 'end') {
                    this.gList.length = 0;
                    this.componentList.length = 0;
                    this.pickList.length = 0;
                    this.goldResult = jsonObj['datas']['list'];
                }
                // 点名投屏
                if (jsonObj['datas']['op'] === 'pick') {
                    this.gList.length = 0;
                    this.componentList.length = 0;
                    this.pickList = jsonObj['datas']['list'];
                }

            } else if (jsonObj['action'] === 'pc_scene_answers_update') { // 贴吧弹幕等学生动态回复内容追加
                if (this.s_id === jsonObj['list'][0]['n_id']) {
                    let item = jsonObj['list'][0];
                    this.answerList.push(item);
                }

            } else if (jsonObj['action'] === 'pc_origin_answers_update') { // 六顶思考帽 回复内容追加
                if (this.s_id === jsonObj['list'][0]['n_id'] && jsonObj['IsLeaderSubmit'] === 1) {
                    let item = jsonObj['list'][0];
                    this.sixAnswerList.push(item);
                }

            }else if (jsonObj['action'] === 'pc_sixhat_endvote') { // 六顶思考帽 显示分数
                this.sixScore = true;
                this.sixScoreList = jsonObj['list'];
                this.CSixHatComponent.sortAnswer(this.sixScoreList);
            }
            else if (jsonObj['action'] === 'pc_scene_answers_yon_update') {
                let list = jsonObj['list'][0];

                let index = list.g_index;
                let yon = list.g_yon;
                let id = list.id;

                for (let i = 0; i < this.answerList.length; i++) {

                    if (id == this.answerList[i].id) {
                        this.answerList[index].g_yon = yon;
                    }

                }
            } else if (jsonObj['action'] === 'PC_keyWord_Update') {
                this.guesskey = jsonObj['keyWord'];
            } else if (jsonObj['action'] === 'phone_insert_group') { // 更新分组信息

                const list = jsonObj['list'];
                for (let j = 0; j < this.gList.length; j++) {
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].g_id === this.gList[j].id) {
                            this.gList[j]['num'] = list[i]['StuTotal'];
                        }
                    }
                }
            } else if (jsonObj['action'] === 'pc_start') {  // 更新投屏二维码

                this.start = true;
                this.devoteShow = false;
                let value;
                this.goldObj = '';
                this.gList.length = 0;
                this.componentList.length = 0;
                this.pickList.length = 0;
                this.answerList.length = 0;
                this.sixAnswerList.length = 0;
                this.goldResult.length = 0;
                this.sixScore = false;
                this.sixScoreList.length = 0;
                //console.log(jsonObj['list']);
                //console.log("pc_start-----------");
                //console.log(jsonObj);
                value = JSON.parse(this.value);
                value.sim_id = jsonObj.sim_id;
                value.cla_id = jsonObj.cla_id;
                value.cour_id = jsonObj.cour_id;
                value.p_type = jsonObj.p_type;
                value.p_id = jsonObj.p_id;
                this.value = JSON.stringify(value);
                this.projectParmas = {
                    width: jsonObj.list[0]['p_width'],
                    height: jsonObj.list[0]['p_height']
                };
            } else if (jsonObj['action'] === 'pad_start') {  // PC端请求二维码
                this.devoteShow = false;
                // console.log("pad_start-----------");
                let value;
                this.goldObj = '';
                this.gList.length = 0;
                this.componentList.length = 0;
                this.pickList.length = 0;
                this.answerList.length = 0;
                this.goldResult.length = 0;
                // console.log(jsonObj['list']);

                // console.log(jsonObj);
                value = JSON.parse(this.value);
                value.sim_id = jsonObj.sim_id;
                value.cla_id = jsonObj.cla_id;
                value.cour_id = jsonObj.cour_id;
                value.p_type = jsonObj.p_type;
                value.p_id = jsonObj.p_id;
                this.value = JSON.stringify(value);
                this.projectParmas = {
                    width: jsonObj.list[0]['p_width'],
                    height: jsonObj.list[0]['p_height']
                };
            } else if (jsonObj['action'] === 'pc_devote' ) {
                this.devoteShow = true;
                this.goldObj = '';
                this.gList.length = 0;
                this.componentList.length = 0;
                this.pickList.length = 0;
                this.answerList.length = 0;
                this.goldResult.length = 0;
                const devoteList = jsonObj['list'];
                this.devoteAnswerList = [];
                this.devoteNumList = [];
                for (let i = 0; i < jsonObj['list'].length; i++) {
                    this.devoteAnswerList.push(jsonObj['list'][i].answer);
                    this.devoteNumList.push(parseInt(jsonObj['list'][i].votenum));
                }
                this.echartsOption.xAxis.data = this.devoteAnswerList;
                this.echartsOption.series[0].data = this.devoteNumList;

                this.echartsObj = this.echarts.init(this.charts.nativeElement);
                this.echartsObj.setOption(this.echartsOption);
                this.echartsObj.resize();
            } else if(jsonObj['action'] === 'pc_devote_update'){
                //console.log(jsonObj)

                let index = jsonObj['ans_index'];
                //console.log(this.echartsOption.series[0].data)
                this.echartsOption.series[0].data[index] += 1;

                // console.log(this.yData);
                this.echartsObj = this.echarts.init(this.charts.nativeElement);
                this.echartsObj.setOption(this.echartsOption);
                this.echartsObj.resize();
            } else if (jsonObj['action'] === 'pc_getdevote') {
                this.devoteShow = true;

                //console.log(jsonObj['datas'])
                this.echartsOption.xAxis.data = jsonObj['datas'].xAxis.data
                this.echartsOption.series[0].data = jsonObj['datas'].series[0].data;
                // this.echartsOption = jsonObj['datas']
                this.echartsObj = this.echarts.init(this.charts.nativeElement);
                this.echartsObj.setOption(this.echartsOption);
                this.echartsObj.resize();
            }else if(jsonObj['action'] === 'pc_analog_start'){
                this.talkgroup = jsonObj['list'][0].g_name+' 正在发言'
            }else if(jsonObj['action'] === 'pc_analog_end'){
                this.talkgroup = '无人发言';
                this.http.getSixHatAnalogGroList({sim_id:this.sim_id,n_id:this.n_id,g_id:this.g_id}).subscribe(res=>{
                    //console.log(res)
                    if(res['code']==0){
                        this.talkNum+=1;
                        if(this.talkNum == res['list'].length){
                            this.selectshow = true;
                        }
                    }
                })
            }else if(jsonObj['action'] === 'pc_analog_option'){
                this.currindex = jsonObj['curr_index']
            }
        });
    }

    ngOnDestroy() {
        this.socketSubscription.unsubscribe();
    }

}
